<template>
    <div class="box">
        <div class="sortBox">
            <!-- :key="'sort-' + i" -->
            <div class="sort" v-for="(ti,i) in title" :key="'sort-' + i" v-show="i==0">
                <div class="title">{{ti.categoryName}}</div>
                <ul class="item">
                    <li v-for="(it,j) in ti.subCate" :key="j" v-show="j<5" :class="{active: categoryName==it.categoryName}">
                        <router-link :to="'/song/?subCateId=' + it.id + '&categoryName=' + it.categoryName">{{it.categoryName}}</router-link>       
                    </li>                  
                    <el-popover placement="bottom" width="300" trigger="click">
                        <li slot="reference" class="more">更多</li>
                            <ul id="more">
                                <li v-for="(it,j) in ti.subCate" :key="j" v-show="j>4" :class="{active: categoryName==it.categoryName}">
                                    <router-link :to="'/song/?subCateId=' + it.id + '&categoryName=' + it.categoryName">{{it.categoryName}}</router-link>
                                </li>
                            </ul>
                    </el-popover>
                </ul>
            </div>
            <div class="sort" v-for="(t,i) in title" :key="i" v-show="i>0">
                <div class="title">{{t.categoryName}}</div>
                <ul class="item">
                    <li v-for="(item,j) in t.subCate" :key="j" v-show="j<8" :class="{active: categoryName==item.categoryName}">
                        <router-link :to="'/song/?subCateId=' + item.id + '&categoryName=' + item.categoryName">{{item.categoryName}}</router-link>  
                    </li>
                    <el-popover placement="bottom" width="300" trigger="click">
                        <li slot="reference" class="more" >更多</li>
                        <ul id="more">
                            <li v-for="(item,j) in t.subCate" :key="j" v-show="j>7" :class="{active: categoryName==item.categoryName}">
                                <router-link :to="'/song/?subCateId=' + item.id + '&categoryName=' + item.categoryName">{{item.categoryName}}</router-link>  
                            </li>
                        </ul>
                    </el-popover>
                </ul>
            </div>
        </div>

        <div class="musicList">
            <div>
                <h2>{{name}}</h2>
                <i class="iconfont icon-biaoqing" v-show="name != '全部歌单'" @click="$router.push({name:'Song'})"></i>
            </div>
            <div class="infoBox">
                <div class="info" v-for="(info,k) in info" :key="k">
                    <router-link :to="'/song/' + info.id">
                        <div class="pic">
                            <img v-lazy="info.coverImgUrl" alt="">
                        </div>
                        <p>{{info.name}}</p>
                        <div class="play"><span></span></div>
                    </router-link>
                </div>
            </div>
        </div>
            <div>

    
  </div>
        <el-pagination background layout="prev, pager, next" 
        :page-size="pageSize" :total="total - 0" :current-page="$route.query.pageNo - 0"
        @current-change="changePage">     
        </el-pagination>
    </div> 
</template>

<script>
export default {
    props: ['id','categoryName'],
    data() {
        return {
            title: [],
            info: [],
            loading: false,
            pageSize: 50,
            total: '',
            name: '全部歌单',
    }

    },
    beforeRouteEnter (to, from, next) {
        next((vm) => {
            console.log(vm);
            vm.getTitle()
            vm.getInfo(vm.$route.query.pageNo || 1,vm.$route.query.categoryName)
        })
    },
    beforeRouteUpdate (to, from, next) {
        this.changeTitle(to)
        this.getTitle()
        this.getInfo(to.query.pageNo || 1,to.query.categoryName,)
        next()
    },
    methods: {
       changeTitle(to){
            if(to.query.subCateId){
                this.title.forEach((ele) => {
                    ele.subCate.forEach((ctn) => {
                        if(ctn.id == to.query.subCateId){
                            this.name = ctn.categoryName
                            return
                        }
                    })
                })
                return
            }  
            this.name = "全部歌单"
        },
       changePage(page){
            this.$router.push(`/song/?subCateId=${this.id}&categoryName=${this.categoryName}&pageNo=${page}`)
        },
        getTitle(){
            this.axios.get('https://music.taihe.com/v1/tracklist/category?sign=39c378d698bf64743a8a32b1f2a6fc7b&appid=16073360&timestamp=1617602362').then((res) => {
                this.title = res.data.data
                this.changeTitle(this.$route)
            })
        },
        getInfo(pageNo,cat){
            console.log(cat);
            // if(ids){
            //     this.$router.push(`/song/${ids}`)
            //     return
            // }
            // var url = `https://music.taihe.com/v1/tracklist/list?pageNo=${pageNo}&pageSize=50&subCateId=${id}`
            if(!cat){
                cat=''
            }
            var url = `https://autumnfish.cn/top/playlist?cat=${cat}&offset=${pageNo}`
            this.axios.get(url).then((res) => {
                this.total = 5200
                this.info = res.data.playlists
                console.log(res);
            })
        },
        nextSong () {
      // console.log(currentIndex)
      if (this.currentIndex < this.songs.length - 1) {
        this.currentIndex += 1
      } else {
        this.currentIndex = 0
      }
      this.currentSrc = this.songs[this.currentIndex].src
      console.log('currentIndex:' + this.currentIndex)
      console.log('currentSrc:' + this.currentSrc)
    },
    playMusic (id) {
      console.log('id:' + id)
      if (this.currentIndex !== id) {
        this.currentIndex = id
        this.currentSrc = this.songs[this.currentIndex].src
      }
    }
  }
}

</script>

<style scoped>
/* 控制active的添加：1、用router-link-exact-active，一个页面里只能用一次，这种可以直接控制刷新不返回初始效果
2、其它的添加active使用绑定动态class，判断条件使用index.js中的props传递过来的数据，这样可以控制刷新不返回初始效果 */
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    .box{
        min-width: 1500px;
    }
    .sortBox,.musicList{
        min-width: 1228px;
    }
    ul{
        list-style: none;
    }
    a{
        text-decoration: none;
        color: #222;
        display: inline-block;
        width: 100%;
        height: 100%;
        border-radius: 10px;
    }
    .sortBox{
        width: 80vw;
        margin: 20px auto;
        display: flex;
        justify-content: space-between;
    }
    .sort{
        width: 18%;
    }
    .sort .title{
        font-weight: bold;
    }
    
    .sortBox .sort:nth-child(1){
        width: 12%;
    }
    .item{
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .item .more{
        color: #909399;
    }
    .item .more.current{
        background-color: red;
        color: #fff;
    }
    
     #more{
        display: flex;
        flex-wrap: wrap;
        padding-left: 4px;
    }
    .item li,#more li{
        width: 70px;
        height: 30px;
        line-height: 30px;
        font-size: 14px;
        background-color: #f8f8f8;
        padding: 0 2px;
        border-radius: 20px;
        text-align: center;
        margin: 5px 0;
        cursor: pointer;
    }
    #more li{
        margin-right: 3px;
    }
    #more li a{
        color: #606266;
    }
    .item li.active,#more li.active{
        border-radius: 20px;
        color: #fff;
        background-color: red;
    }
    .item li.active a,#more li.active a{
        color: #fff;
    }


    .musicList{
        width: 80vw;
        margin: 0 auto;
    }
    .musicList h2{
        font-weight: 100;
        font-size: 30px;
    }
    .musicList>div{
        display: flex;
    }
    .musicList i{
        display: inline-block;
        width: 20px;
        height: 20px;
        font-size: 20px;
        color: #909399;
        cursor: pointer;
    }
    .infoBox{
        display: flex;
        flex-wrap: wrap;
    }
    .infoBox .info{
        width: 20%;
        margin: 20px 0;
        cursor: pointer;
        overflow: hidden;
        position: relative;
    }
    .infoBox .info:hover .play{
        display: block;
    }
    .infoBox .info .pic{
        width: 224px;
        height: 224px;
        overflow: hidden;
    }
    .infoBox .info:hover img{
        transform: scale(1.05);
    }
    .infoBox .info img{
        width: 100%;
        height: 224px;
        transition: all .6s;
    }
    .infoBox .info p{
        width: 90%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin: 10px 0;
    }
    .infoBox .info .play{
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background-color: #fff;
        position: absolute;
        left: 0;
        top: -30px;
        right: 0;
        bottom: 0;
        margin: auto;
        display: none;
    }
    .infoBox .info .play span{
        border: 15px solid transparent;
        border-left: 20px solid #c89977;
        display: inline-block;
        margin-left: 18px;
        position: absolute;
        top: 25%;
        left: 6%;
    }


    .el-pagination{
        display: flex;
        justify-content: center;
        padding-top: 30px;
    }

      ul li {
    cursor: pointer;
    list-style-type: none;
    width: 100px;
  }
  .active {
    background-color: #1989FA;
  }
    
</style>